<template>
  <div id="home">
    <el-row :gutter="0">
      <!-- 版本信息 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div class="grid-content">
          <el-card class="box-card" :body-style="{ overflow: 'scroll', height: 'calc(100% - 57px)'}">
            <!-- 头部 -->
            <div slot="header" class="clearfix">
              <span>版本信息</span>
            </div>
            <!-- 内容 -->
            <div class="text item">
                <el-timeline v-for="item in revEditionList" :key="item.id">
                  <el-timeline-item :timestamp="item.time" :color="iconcolor[item.id % iconcolor.length]" placement="top">
                    <el-card>
                      <h3 :style="{marginBottom:'10px'}" >{{item.title}} ({{item.time}})</h3>
                      <p v-for="(item1,index) in item.content" :key="index" >{{index+1}}.{{item1}}</p>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
            </div>
          </el-card>
        </div>
      </el-col>
      <!-- 用户信息 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div class="grid-content">
          <el-card class="box-card" :body-style="{ overflow: 'scroll', height: 'calc(100% - 57px)'}">
            <!-- 头部 -->
            <div slot="header" class="clearfix">
              <span>用户信息</span>
            </div>
            <!-- 内容 -->
            <div class="text item">
              <el-descriptions  :column="4" border direction="vertical" size="medium">
                <el-descriptions-item label="用户名"><div slot="label"><i class="icon el-icon-user-solid"></i>用户名</div>小明</el-descriptions-item>
                <el-descriptions-item label="手机号"><div slot="label"><i class="icon el-icon-phone"></i>手机号</div>18100000000</el-descriptions-item>
                <el-descriptions-item label="地址" :span="2"><div slot="label"><i class="icon el-icon-location-outline"></i>地址</div>中国</el-descriptions-item>
                <el-descriptions-item label="标签" :span="2"><div slot="label"><i class="icon el-icon-tickets">标签</i></div>
                  <el-tag size="small" class="marginleft">学校</el-tag>
                  <el-tag size="small" class="marginleft" type="success">运动</el-tag>
                  <el-tag size="small" class="marginleft" type="info">学习</el-tag>
                  <el-tag size="small" class="marginleft" type="warning">游戏</el-tag>
                  <el-tag size="small" class="marginleft" type="danger">编程</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="联系地址" :span="2"><div slot="label"><i class="icon el-icon-postcard"></i>联系地址</div>中国人民共和国</el-descriptions-item>
                <el-descriptions-item :span="4" label="个性签名"><div slot="label"><i class="icon el-icon-notebook-2"></i>个性签名</div>百思可得其解</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-card>
        </div>
      </el-col>
      <!-- 折线图 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <div class="grid-content">
          <el-card class="box-card">
            <!-- 头部 -->
            <div slot="header" class="clearfix">
              <span>折线图信息</span>
            </div>
            <!-- 内容 -->
            <div class="text item">
              <div id="line" class="boxsize"></div>
            </div>
          </el-card>
        </div>
      </el-col>

      <!-- 饼状图 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <div class="grid-content">
          <el-card class="box-card">
            <!-- 头部 -->
            <div slot="header" class="clearfix">
              <span>饼图信息</span>
            </div>
            <!-- 内容 -->
            <div class="text item">
              <div id="pieshape" class="boxsize"></div>
            </div>
          </el-card>
        </div>
      </el-col>

      <!-- 柱状图 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
        <div class="grid-content">
          <el-card class="box-card">
            <!-- 头部 -->
            <div slot="header" class="clearfix">
              <span>柱图信息</span>
            </div>
            <!-- 内容 -->
            <div class="text item">
              <div id="bars" class="boxsize"></div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// import { init }from "ityped";
export default {
  name: "HomeView",
  component: {},
  props: {},
  data() {
    return {
      // 隐藏或显示
      isShow: true,
      // 版本信息颜色
      iconcolor:["#409EFF","#409EFF","#E6A23C","#F56C6C","#909399"],
      // 版本信息
      editionList:[
        {
          id:1,
          time:"2023-2-16",
          title:"1.00版",
          content:["封装头部和菜单栏组件","引入elemenet组件","配置i18n翻译"]
        },
        {
          id:2,
          time:"2023-2-17",
          title:"1.01版",
          content:["添加面包屑","设置首页栅格布局","修改菜单栏伸缩"]
        },
        {
          id:3,
          time:"2023-2-18",
          title:"1.02版",
          content:["添加首页内容"]
        }
      ],
    };
  },
  computed: {
    // 反转版本列表
    revEditionList(){
      var rev = this.editionList
      return rev.reverse()
    }
  },
  methods: {
    // 折线
    linkLhange(){
      const chartBox = this.$echarts.init(document.getElementById("line"));
      // console.log("我执行了",chartBox)
      const option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads'],
          left: 'right'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {
                show: false
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1日', '2日','3日','4日','5日','6日', '7日', '8日','9日','10日','11日','12日', '13日','14日','15日', '16日','17日','18日', '19日','20日','21日','22日','23日','24日','25日','28日','29日','30日','31日'],
          axisLabel:{
            interval:2
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Tota1',
            data: [120, 132, 101, 134, 90, 230, 210, 191, 234, 290, 150, 232, 201, 154, 190, 330, 399, 290, 330, 310, 101, 134, 90, 120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Tota2',
            data: [220, 182, 191, 234, 290, 330, 310, 101, 134, 90, 120, 132, 101, 134, 90, 230, 230, 291, 234, 290, 190, 250, 232, 201, 90, 290, 150, 232, 201, 154]
          },
          {
            name: 'Video Ads',
            type: 'line',
            stack: 'Tota3',
            data: [150, 232, 201, 154, 190, 330, 399, 290, 330, 310, 90, 230, 210, 191, 234, 290, 150, 232, 201, 90, 290, 150, 232, 201, 154, 190, 330, 399, 290, 330]
          }
        ],
        dataZoom:[
          {
            xAxisIndex: 0,// 这里是从X轴的0刻度开始
            show: false, // 是否显示滑动条，不影响使用
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            // start: 0, //初始化时，滑动条宽度开始标度
            // end: 70,
            startValue:0,
            endValue:12
          }
        ]
      };
      chartBox.setOption(option);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        chartBox.resize();
      });
      // console.log(option.series[0].data.length)
      // 变换
      setInterval(function () {
        // 每次向后滚动一个，最后一个从头开始。
        // console.log(option.series[0].data.length)
        if (option.dataZoom[0].endValue == option.series[0].data.length-1) {
            option.dataZoom[0].endValue = 12; 
            option.dataZoom[0].startValue = 0;
        }
        else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        chartBox.setOption(option);
    }, 3000);
    },
    // 饼图
    pieshape(){
      const chartBox = this.$echarts.init(document.getElementById('pieshape'))
      const option = {
        title: {
          // text: 'Referer of a Website',
          // subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // orient: 'vertical',
          left: 'right'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            center:['50%','60%'],
            radius: '70%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      chartBox.setOption(option);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        chartBox.resize();
      });
    },
    // 柱图
    bars(){
      const chartBox = this.$echarts.init(document.getElementById('bars'))
      const option = {
        legend: {
          left: 'right',
          data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: ['2021', '2022', '2023'],
          type: 'category'
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            name:"Matcha Latte",
            data:[43.3, 85.8,93.7]
          },
          {
            type: 'bar',
            name: 'Milk Tea', 
            data:[83.1,73.4,55.1]
          },
          {
            type:"bar",
            name:'Cheese Cocoa',
            data:[86.4, 65.2, 82.5]
          }
        ]
      }
      chartBox.setOption(option)
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        chartBox.resize();
      });
    }
  },
  created() {
  },
  mounted() {
    this.linkLhange()
    this.pieshape()
    this.bars()
    // console.log(document.getElementById("line"))
  }
};
</script>
<style lang="scss" scoped>
.box {
  height: 50px;
  width: 100px;
}
.el-row {
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  &:last-child {
    margin-bottom: 24px;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  height: 347px;
  margin: 24px 12px 0 12px;
  // padding: 0 12px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}


// 卡片
.box-card {
  height: 100%;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.boxsize{
  height: 100%;
}
.clearfix {
  :before {
    display: table;
    content: "";
  }
  :after {
    display: table;
    content: "";
  }
}



// 表格
.marginleft{
  margin-right: 5px;
}

// link表
.boxsize{
  height: 251px;
  width: 100%;
}
</style>
